
import React, { useState, useEffect } from 'react'
import HeaderBox from '@/components/header'
import FooterBox from '@/components/footer'
import UserMenu from '@/components/userMenu'
import btcIcon from '../../assets/img/icon/btc.png'
import aliIcon from '../../assets/img/icon/alipay.png'
import cardIcon from '../../assets/img/icon/card.png'
import flashPack from '../../assets/img/flash-pack.png'
import './index.scss';
import { Layout, Row, Col, Table, Tabs, Button } from 'antd';
const { Content } = Layout;
const { Column } = Table;
const { TabPane } = Tabs;

function MyOrder(props) {

    const dataSource = [
        {
            key: '1',
            orderId: '151511BTDI',
            num: '1 THS',
            pay: 1,
            total: '$193.18',
            time: '2021/02/22',
            day: '181天',
            status: 1
        },
        {
            key: '2',
            orderId: '151511BTDI',
            num: '1 THS',
            pay: 2,
            total: '$193.18',
            time: '2021/02/22',
            day: '181天',
            status: 2
        },
        {
            key: '3',
            orderId: '151511BTDI',
            num: '1 THS',
            pay: 3,
            total: '$193.18',
            time: '2021/02/22',
            day: '181天',
            status: 3
        }
    ];

    const [typeIndex, setTypeIndex] = useState(0)
    const [typeList, setTypeList] = useState([
        { name: '全部' },
        { name: '等待中' },
        { name: '生效中' },
        { name: '已完成' },
        { name: '已取消' }
    ])

    const [orderList, setOrderList] = useState([
        { type: 1 },
        { type: 2 },
        { type: 3 },
    ])

    const setType = index => {
        setTypeIndex(index)
    }

    const typeItem = (value, index) => {
        return (
            <div className={typeIndex === index ? "type-item-active" : "type-item"} key={index} onClick={() => setType(index)}>
                {value.name}
            </div>
        )
    }

    const orderItem = (value, index) => {
        return (
            <div className="order-item" key={index} >
                <p className="order-no">订单编号:<span>161484618738nY</span></p>
                <Row align="middle">
                    <Col lg={5}>
                        <Row>
                            <Col>
                                <img className="order-img" src={flashPack} />
                            </Col>
                            <Col>
                                <p className="order-num">153</p>
                                <p className="order-num-desc">电费包</p>
                            </Col>
                        </Row>
                    </Col>
                    <Col lg={6} className="order-desc">
                        <p>操作时间<span>2021.03.04</span></p>
                        <p>支付总额<span>$150</span></p>
                    </Col>
                    <Col lg={7} className="order-desc">
                        <p>生效日期<span>2021.03.04</span></p>
                        <p>支付方式<span><img className="pay-icon" src={aliIcon} /></span></p>
                    </Col>
                    <Col lg={6} className="order-btn">
                        <p>状态</p>
                        <div>
                            {
                                value.type === 1 ? <Button className="unpaid-btn" type="primary">未付款</Button>
                                    : value.type === 2 ? <Button type="primary">已绑定</Button>
                                        : <Button className="completed-btn" type="primary">已完成</Button>
                            }
                            {
                                value.type === 2 ? <a className="bind-new">新增绑定</a> : null
                            }
                        </div>
                    </Col>
                </Row>
            </div>
        )
    }

    return (
        <Layout className="layout">
            <HeaderBox />
            <Content>
                <Row className="myorder main" justify="space-between">
                    <Col lg={4} md={20}>
                        <UserMenu current="2" />
                    </Col>
                    <Col className="myorder-main" lg={19} md={20}>
                        <Tabs defaultActiveKey="1">
                            <TabPane tab="算力套餐订单" key="1">

                                <Table dataSource={dataSource} >
                                    <Column title="订单号" dataIndex="orderId" key="orderId" />
                                    <Column title="数量" dataIndex="num" key="um" />
                                    <Column title="支付方式" dataIndex="pay" key="pay" render={pay => (
                                        <>
                                            {
                                                pay === 1 ? <img className="pay-icon" src={btcIcon} alt="" />
                                                    : pay === 2 ? <img className="pay-icon" src={aliIcon} alt="" />
                                                        : <img className="pay-icon" src={cardIcon} alt="" />
                                            }
                                        </>
                                    )} />
                                    <Column title="支费总额" dataIndex="total" key="total" />
                                    <Column title="下单时间" dataIndex="time" key="time" />
                                    <Column title="剩余时间" dataIndex="day" key="day" />
                                    <Column title="状态" dataIndex="status" key="status" render={tags => (
                                        <>
                                            {
                                                tags === 1 ? <Button className="unpaid-btn" type="primary">未付款</Button>
                                                    : tags === 2 ? <Button className="cancel-btn" type="primary">已取消</Button>
                                                        : <Button className="completed-btn" type="primary">已完成</Button>
                                            }
                                        </>
                                    )} />
                                </Table>
                            </TabPane>
                            <TabPane tab="电费订单" key="2">
                                {
                                    orderList.map((value, index) => {
                                        return orderItem(value, index)
                                    })
                                }
                            </TabPane>

                        </Tabs>
                        <div className="myorder-type">
                            {
                                typeList.map((value, index) => {
                                    return typeItem(value, index)
                                })
                            }
                        </div>
                    </Col>
                </Row>
            </Content>
            <FooterBox />
        </Layout>
    )
}

export default MyOrder